<template>
  <div class="app-container">
    <div>
      <el-input
        v-model="viewModel.VideoName"
        size="small"
        placeholder="视频名称"
        style="width: 200px;"
        class="filter-item"
        @keyup.enter.native="queryList"
      />
      <el-select v-model="viewModel.CategoryId" filterable size="small" placeholder="请选择">
        <el-option
          v-for="item in queryCategoryList"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>

      <el-select v-model="viewModel.TypeCode" filterable size="small" placeholder="请选择">
        <el-option
          v-for="item in queryTypeList"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
      <el-button type="primary" size="small" @click="queryList" icon="el-icon-search">查询</el-button>
      <el-button type="primary" size="small" @click="handleAdd" icon="el-icon-plus">新增</el-button>
      <el-button type="primary" size="small" @click="refresh" icon="el-icon-refresh">刷新</el-button>
    </div>
    <el-table
      :data="modelList"
      :header-cell-style="{background:'#eef1f6',color:'#606266'}"
      style="width: 100%;margin-top:30px;"
      border
      v-loading="loading"
    >
      <el-table-column label="名称" prop="Name" show-overflow-tooltip>
        <template slot-scope="scope">{{ scope.row.Name }}</template>
      </el-table-column>
      <el-table-column label="描述" prop="Description" show-overflow-tooltip>
        <template slot-scope="scope">{{ scope.row.Description }}</template>
      </el-table-column>

      <el-table-column label="时长" prop="DurationStr">
        <template slot-scope="scope">{{ scope.row.DurationStr }}</template>
      </el-table-column>
      <el-table-column label="大小" prop="SizeStr" show-overflow-tooltip>
        <template slot-scope="scope">{{ scope.row.SizeStr }}</template>
      </el-table-column>

      <el-table-column label="分类名称" prop="CategoryName" show-overflow-tooltip>
        <template slot-scope="scope">{{ scope.row.CategoryName }}</template>
      </el-table-column>

      <el-table-column label="基础分类" prop="TypeName" show-overflow-tooltip>
        <template slot-scope="scope">{{ scope.row.TypeName }}</template>
      </el-table-column>

      <el-table-column label="状态" prop="StatusStr">
        <template slot-scope="scope">{{ scope.row.StatusStr }}</template>
      </el-table-column>

      <el-table-column label="创建时间" prop="CreateTime">
        <template slot-scope="scope">{{ scope.row.CreateTime }}</template>
      </el-table-column>

      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            @click="viweVideo(scope)"
            v-if="scope.row.Status == 3"
            icon="el-icon-edit"
          >预览</el-button>
          <el-button type="text" size="small" @click="handleEdit(scope)" icon="el-icon-edit">编辑</el-button>
          <el-button type="text" size="small" @click="handleDelete(scope)" icon="el-icon-delete">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件：https://element.eleme.cn/#/zh-CN/component/pagination -->
    <div class="block" style="float:right;margin-top:15px;" v-if="total>0">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="viewModel.PageIndex"
        :page-sizes="[10, 20, 30, 40,100]"
        :page-size="viewModel.pageSize"
        @prev-click="lastPage"
        @next-click="nextPage"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>

    <el-dialog
      :visible.sync="addVisible"
      :title="'新增'"
      @close="closeAddDialog"
      :before-close="handleCloseAdd"
      width="50%"
      top="2vh"
      :close-on-click-modal="false"
    >
      <el-form
        :model="addmodel"
        ref="addmodel"
        :rules="rules"
        label-width="80px"
        label-position="right"
        style="width: 90%;"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="视频分类" prop="CategoryId">
              <el-select
                v-model="addmodel.CategoryId"
                style="width:100%"
                filterable
                placeholder="请选择分类"
              >
                <el-option
                  v-for="item in categoryList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="班级类型" prop="TypeCode">
              <el-select v-model="addmodel.TypeCode" style="width:100%" placeholder="请选择班级类型">
                <el-option
                  v-for="item in typeList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-form-item label="上传视频" prop="DownloadUrl">
              <el-upload
                class="avatar-uploader"
                accept="video/mp4"
                :action="actionUrl"
                :show-file-list="false"
                multiple
                :before-upload="beforeUploadForAdd"
                style="width: 12%;float: left;"
              >
                <el-button type="primary" v-loading="uploading" size="small">上传视频</el-button>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row v-if="uploaderInfos.length>0">
          <el-col :span="24">
            <el-form-item label="上传列表" prop="DownloadUrl">
              <el-table :data="uploaderInfos" style="width: 100%">
                <el-table-column prop="date" label="视频名称">
                  <template slot-scope="scope">{{ scope.row.Name }}</template>
                </el-table-column>
                <el-table-column prop="date" label="上传进度" width="180">
                  <template slot-scope="scope">{{ scope.row.progress }}</template>
                </el-table-column>
                <el-table-column prop="date" label="上传结果" width="180">
                  <template
                    slot-scope="scope"
                  >{{ scope.row.isVideoUploadCancel ? '已取消': scope.row.isVideoUploadSuccess ? '上传成功' : '上传中'}}</template>
                </el-table-column>
              </el-table>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div style="text-align:right;">
        <el-button type="danger" @click="cancelAdd">取消</el-button>
        <el-button type="primary" @click="confirmAddModel">提交</el-button>
      </div>
    </el-dialog>

    <el-dialog
      :visible.sync="dialogVideoVisible"
      :title="'预览'"
      width="60%"
      @close="pauseVideo"
      top="2vh"
      :close-on-click-modal="false"
    >
      <SVideo width="765" ref="playVideo" height="605" :src="playUrl"></SVideo>
    </el-dialog>

    <el-dialog
      :visible.sync="dialogVisible"
      :title="dialogType==='edit'?'编辑':'新增'"
      @close="closeDialog"
      :before-close="handleClose"
      width="50%"
      top="2vh"
      :close-on-click-modal="false"
    >
      <el-form
        :model="model"
        ref="model"
        :rules="rules"
        label-width="80px"
        label-position="right"
        style="width: 90%;"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="视频分类" prop="CategoryId">
              <el-select
                v-model="model.CategoryId"
                style="width:100%"
                filterable
                @change="change"
                placeholder="请选择分类"
              >
                <el-option
                  v-for="item in categoryList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="班级类型" prop="TypeCode">
              <el-select
                v-model="model.TypeCode"
                style="width:100%"
                @change="change"
                placeholder="请选择班级类型"
              >
                <el-option
                  v-for="item in typeList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="视频名称" prop="Name">
              <el-input v-model="model.Name" placeholder="视频名称" @input="change" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="封面" prop="ShowCoverUrl">
              <el-upload
                class="avatar-uploader"
                :action="actionUrl"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
              >
                <img v-if="model.ShowCoverUrl" :src="model.ShowCoverUrl" class="avatar" />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-form-item label="视频地址" prop="DownloadUrl">
              <el-input
                style="width: 70%;float: left;"
                v-model="model.DownloadUrl"
                ref="videoaddress"
                placeholder="视频地址"
                :disabled="true"
              />
              <el-upload
                class="avatar-uploader"
                accept="video/mp4"
                :action="actionUrl"
                :show-file-list="false"
                :before-upload="beforeUpload"
                style="width: 12%;float: left;"
              >
                <el-button type="primary" v-loading="uploading" size="mini">上传视频</el-button>
              </el-upload>
              <span style="margin-left:10px;" v-if="uploading">
                <i class="el-icon-loading"></i>
                {{progressStr}}
              </span>
            </el-form-item>

            <input type="text" ref="fileId" name v-show="false" />
            <input type="text" ref="videourl" name v-show="false" />
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-form-item label="视频描述" prop="Description">
              <el-input
                type="textarea"
                :rows="3"
                v-model="model.Description"
                @input="change"
                placeholder="视频描述"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="序号" prop="Sort">
              <el-input-number
                v-model="model.Sort"
                :min="0"
                :step="0.5"
                @change="change"
                label="序号"
              ></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div style="text-align:right;">
        <el-button type="danger" @click="dialogVisible=false">取消</el-button>
        <el-button type="primary" :loading="loading" @click="confirmModel">提交</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 100%;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.v-modal {
  z-index: 2000 !important;
}
</style>

<script src="@/js/video/index.ts">
</script>
